<template>
    <div class="section_common">

        <div class="main">
            <el-form label-width="100px" >
                <el-form-item label="申请人" >
                    <el-input  v-model="applyerUser" size="mini" readonly></el-input>
                </el-form-item>
                <el-form-item label="申请授课类别" >
                    <el-select v-model="applyType" multiple placeholder="请选择" readonly>
                        <el-option label="公共课培训" value="公共课培训"></el-option>
                        <el-option label="部门内部培训" value="部门内部培训"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="培训经验描述" >
                    <el-input type="textarea" v-model="experience" size="mini" readonly></el-input>
                </el-form-item>
                <el-form-item label="上级管理评估" >
                    <el-input type="textarea" v-model="superiorEvaluation" size="mini"></el-input>
                </el-form-item>
                <!--<el-form-item id="bhreason" style="display: none" label="驳回原因" required>
                    <el-input v-model="bhreason" size="mini"></el-input>
                </el-form-item>-->

                <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
                    <van-step v-show="oneShow">
                        <h3>审批人：</h3>
                        <van-image v-for="(item,index) in oneLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="twoShow">
                        <van-image v-for="(item,index) in twoLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="threeShow">
                        <van-image v-for="(item,index) in threeLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="fourShow">
                        <van-image v-for="(item,index) in fourLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="fiveShow">
                        <van-image v-for="(item,index) in fiveLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="csShow">
                        <h3>抄送人：</h3>
                        <van-image v-for="(item,index) in csLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                </van-steps>
                <!--<van-dialog title="   " v-model="bhshow" show-cancel-button :before-close="chargeBtn" message-align="left">
                    <el-form-item label="驳回原因" required>
                        <el-input v-model="bhreason" type="textarea" :autosize="{ minRows: 4}"></el-input>
                    </el-form-item>
                </van-dialog>-->
                <el-form-item>
                    <el-button id="isBack" v-show="isBackBtn" v-bind:disabled="isShowBack" type="warning" size="mini" @click="backout">撤销</el-button>
                    <el-button id="isAgree" v-show="isAgreeBtn" v-bind:disabled="isShow" type="primary" size="mini" @click="submitAgree">{{message}}</el-button>
                    <el-button id="isNotAgree" v-show="isAgreeBtn" v-bind:disabled="isShow" type="warning" size="mini" @click="submitNotAgree">{{message1}}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {Toast} from "vant";
    import Vue from 'vue';
    import { Image as VanImage } from 'vant';

    Vue.use(VanImage);

    export default {
        data() {
            return {
                id:this.$route.params.id,//路由接收的id
                active: 0,
                applyType:[],
                experience:"",
                superiorEvaluation:'',
                applyerUser:'',
                bhreason:"驳回",
                bhshow:false,
                isShow:false,
                message:'通过',
                message1:'驳回',
                isAgreeBtn:false,
                isBackBtn:false,
                isShowBack:false,

                type: this.$route.params.type,
                nowUser: JSON.parse(localStorage.getItem('userInfo')).userId,
                oneShow:false,//审批是否显示
                oneLd:[],
                twoShow:false,
                twoLd:[],
                threeShow:false,
                threeLd:[],
                fourShow:false,
                fourLd:[],
                fiveShow:false,
                fiveLd:[],
                csShow:false,
                csLd:[]
            }
        },
        created() {
            //根据地区获取页面审批人
            this.selSpLeaderByNowUser();
            //获取页面详情
            this.getTeacherDetail();
        },
        methods: {
            getTeacherDetail(){
                this.$https.post('/mobiles/getTeacherDetail', {
                    id: this.id,
                    approver: this.nowUser, //审批用户

                }).then(res => {
                    console.log(res.data)
                    this.applyType.push(res.data.data.traTeacher.applyType)
                    this.experience = res.data.data.traTeacher.experience;
                    this.applyerUser = res.data.data.applyerUser;
                    if (res.data.data.traTeacher.superiorEvaluation !== "" && res.data.data.traTeacher.superiorEvaluation != null){
                        this.superiorEvaluation = res.data.data.traTeacher.superiorEvaluation;
                    }
                    if (res.data.data.agreeBtn){
                        this.isAgreeBtn = true
                        if (res.data.data.agree=='已通过'){
                            this.message='已通过';
                            this.isShow=true;
                        }else if (res.data.data.agree=='已驳回'){
                            this.message1='已驳回';
                            this.isShow=true;
                        }else {
                            if (res.data.data.showAgree=="0"){
                                this.message='已通过';
                                this.isShow=true;
                            }
                        }
                    }else {
                        this.isAgreeBtn = false
                    }
                    if (res.data.data.backBtn){
                        this.isBackBtn = true;
                        if (res.data.data.agree=='已撤销'){
                            this.isShowBack = true;
                        }else {
                            this.isShowBack = false;
                        }
                    }else {
                        this.isBackBtn = false;
                    }

                    this.active=res.data.data.traTeacher.state-1;
                    // this.active=1;


                }).catch(err => {
                    console.log(err);
                })
            },
            //根据申请人的id找到对应的审批人
            selSpLeaderByNowUser(){
                this.$https.post('/mobiles/getTeacherSpLeaderById',{
                    id:this.id
                }).then((res)=>{
                    if (res.data.data.csspusers.length>0){
                        this.csShow=true;
                        this.csLd=res.data.data.csspusers;
                    }else {
                        this.csShow=false;
                        this.csLd=[];
                    }
                    if (res.data.data.onespusers.length>0){
                        this.oneShow=true;
                        this.oneLd=res.data.data.onespusers;
                    }else {
                        this.oneShow=false;
                        this.oneLd=[];
                    }
                    if (res.data.data.twospusers.length>0){
                        this.twoShow=true;
                        this.twoLd=res.data.data.twospusers;
                    }else {
                        this.twoShow=false;
                        this.twoLd=[];
                    }
                    if (res.data.data.threespusers.length>0){
                        this.threeShow=true;
                        this.threeLd=res.data.data.threespusers;
                    }else {
                        this.threeShow=false;
                        this.threeLd=[];
                    }
                    if (res.data.data.fourspusers.length>0){
                        this.fourShow=true;
                        this.fourLd=res.data.data.fourspusers;
                    }else {
                        this.fourShow=false;
                        this.fourLd=[];
                    }
                    if (res.data.data.fivespusers.length>0){
                        this.fiveShow=true;
                        this.fiveLd=res.data.data.fivespusers;
                    }else {
                        this.fiveShow=false;
                        this.fiveLd=[];
                    }

                }).catch(err => {
                    console.log(err);
                })
            },
            // 提交同意
            submitAgree() {
                if (!this.isNull()) return false;
                this.isShow=true;
                this.$https.post('/mobiles/isAgreeTeacher', {
                    id: this.id,
                    approver: this.nowUser, //审批用户
                    superiorEvaluation: this.superiorEvaluation

                }).then(res => {
                    res;
                    Toast("已通过");
                    this.message='已通过';
                    this.isShow=true;
                    this.getTeacherDetail();//找到对应的页面详情，及领导信息

                }).catch(err => {
                    console.log(err)
                });
            },

            //驳回
            submitNotAgree() {
                // this.bhshow=true;
                if (!this.isNull()) return false;
                this.show=false;
                this.$https.post('/mobiles/isAgreeTeacher', {
                    id: this.id,
                    approver: this.nowUser, //审批用户
                    superiorEvaluation: this.superiorEvaluation,
                    bhreason:this.bhreason,
                }).then(res => {
                    res;
                    Toast("已驳回");
                    this.message1="已驳回";
                    this.isShow=true;
                    this.getTeacherDetail();//找到对应的页面详情，及领导信息
                }).catch(err => {
                    console.log(err)
                });
            },
            chargeBtn(action,done){
                if (!this.isNull()) return false;
                if (action==='cancel'){
                    done();
                }else if (action==='confirm'){
                    this.show=false;
                    this.$https.post('/mobiles/isAgreeTeacher', {
                        id: this.id,
                        approver: this.nowUser, //审批用户
                        superiorEvaluation: this.superiorEvaluation,
                        bhreason:this.bhreason,
                    }).then(res => {
                        res;
                        Toast("已驳回");
                        this.message1="已驳回";
                        this.isShow=true;
                        this.getTeacherDetail();//找到对应的页面详情，及领导信息
                        done();
                    }).catch(err => {
                        console.log(err)
                    });
                }
            },
            //撤销提出的招聘申请
            backout(){
                this.$https.post('/mobiles/teacherDeatilBackout', {
                    nowUser:this.nowUser,
                    id:this.id,
                }).then((res) => {
                    Toast(res.data.message);
                    this.getTeacherDetail();//找到对应的页面详情，及领导信息

                }).catch(err => {
                    console.log(err)
                });
            },
            //判断相关数据是否为空
            isNull() {
                if (this.superiorEvaluation == '') {
                    this.$toast("请填入上级评估");
                    return false;
                }
                return true;
            },
            go() {
                this.$router.go(-1)
            }
        },
        beforeRouteLeave(to, from, next) {
            to.params.activeName = '培训管理';
            next();
        },
    };
</script>

<style lang="scss" scoped>
    .main {
        background-color: white;

        .el-form {
            padding-right: 10px;

            .el-form-item {
                .el-form-item__label {
                    line-height: 16px;
                }

                margin-bottom: 20px;
            }
        }
    }
</style>
